﻿<!doctype html>
<html lang="en" id="htmlId">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="Les poissons de Daniel Bettinger.">
		<title>Daniel Bettinger</title>
		<link href="darkBlue.css" rel="stylesheet">
		<style>
			body{
				margin: 0px;
				padding: 0px;
				background-color:#444444;
				background-color:#3DD9EF;
				width:100%;
			}

			/************* Header **************/
			.backgroundTop{
				background-image: -moz-linear-gradient(top, #888888, #DDDDDD);
				background: -o-linear-gradient(#000000, #444444);
				background-image: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#DDDDDD));
				filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#888888,endColorstr=#DDDDDD);
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#888888,endColorstr=#DDDDDD)";
				height: 210px;
				width:100%;
				margin: 0px;
				padding: 0px;
				background-image:url(http://cdn.c.photoshelter.com/img-get/I00007bAvyfM3IIU/s/860/860/breathing-underwater.jpg);
				background-image:url(http://3.bp.blogspot.com/-NM14b4dCmqw/TjG-1P2K6uI/AAAAAAAABhQ/kw1IojAkrWQ/s400/light+blue+abstract+background+3.jpg);
				background-image:url(http://l.rgbimg.com/cache1s0wb5/users/j/jw/jwgeertsma/600/npKmYmw.jpg);
				background-image:url(http://img11.hostingpics.net/pics/278377blueLight.jpg);
			}
			#header{
				height:210px;
			}
			#underHeader{
				margin-left:15px;
				margin-right:15px;
				border: 1px solid black;
			}
			a{
				text-decoration:inherit;
			}
			a:active, a:focus{
				outline:none;
			}
			a:visited, a:hover, a:link{
				color:inherit;
			}
			a:visited, a:hover{
				text-decoration:inherit;
			}
			/************* Menu **************/
			.wrapper {
				width: 100%;
				height: 60px;
				background : #464646;
				background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
				background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
				border-top: 2px solid #939393;
				position: relative;
				margin-bottom: 30px;
			}
			ul {
				margin: 0;
				padding: 0;
			}
			 
			ul.menu {
				height: 60px;
				border-left: 1px solid rgba(0,0,0,0.3);
				border-right: 1px solid rgba(255,255,255,0.3);
				float:left;
			}
			 
			ul.menu li {
				list-style: none;
				float:left;
				height: 59px;
				text-align: center;
				background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
				background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
				}
			 
			ul li a {
				display: block;
				padding: 0 20px;
				border-left: 1px solid rgba(255,255,255,0.1);
				border-right: 1px solid rgba(0,0,0,0.1);
				text-align: center;
				line-height: 59px;
				background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
				background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
				-webkit-transition-property: background;
				-webkit-transition-duration: 700ms;
				-moz-transition-property: background;
				-moz-transition-duration: 700ms;
				}
			 
			ul li a:hover {
				background: transparent none;
			}
			 
			ul li.active a{
				background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
				background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
			}
		</style>
	</head>
	<body id="bodyId">
		<div class="backgroundTop"></div>
		<div style="width:100%;position:absolute;top:0px">
			<div id="header"  style="border:1px solid #3DD9EF; margin-bottom:20px;">
				<div style="float:left;margin-left:15px;margin-top:10px;">
					<img src="http://www.leprogres.fr/fr/images/0F55F716-42D4-4EE8-8DA5-A467465D288A/LPR_02/sos-papa-ce-qui-se-passe-a-nantes-se-passe-aussi-dans-la-loire.jpg" />
				</div>
				<div style="float:left;margin-left:22px;margin-top:10px;">
					<div style="color:#222222;font-family:Arial;font-size:38px;">Daniel Bettinger</div>
					<div style="color:#000;font-family:'Trebuchet MS';width:500px;margin-top:6px;">
Passionné d'aquariophilie, j'élève avec passion des poissons depuis plus de 30 ans. Aujourd'hui j'entretien plus de 10 aquariums! Faisant face à une reproduction conséquente, je vend des poissons à des prix très intéressants. Je propose également tout une gamme d'équipement liée à l'aquariophilie et peux vous accompagner dans la réalisation d'un nouvel aquarium.
					</div>
				</div>
			</div>
			<div id="underHeader" >
				<div id="tabs" class="wrapper">
					<div class="container">
						<ul class="menu" rel="sam1">
							<li class="active"><a href="#">Accueil</a></li>
							{% if groups %}
								{% for group in groups %}
							<li><a href="#">{{ group.name }}</a></li>
								{% endfor %}
							{% endif %}
							{% if questions %}
							<li><a href="#">Foire Aux Questions</a></li>
							{% endif %}
							<li><a href="#">Contact</a></li>
						</ul>
					</div>
				</div>
				{% if welcomeImages %}
					{% for welcomeImage in welcomeImages %}
						<img src="{{ welcomeImage.url }}" />
					{% endfor %}
				{% endif %}
			</div>
		</div>
	</body>
</html>
